<template>
  <div class="tags">
    <el-scrollbar>
      <div class="tags">
        <el-tag
          ref="myTags"
          v-for="(item, index) in tags"
          :key="item.path"
          :effect="route.name === item.name ? 'dark' : 'plain'"
          :closable="item.name !== 'control'"
          :disable-transitions="false"
          @click="handleMenu(item)"
          @close="handleClose(item, index)"
          @contextmenu.prevent="showContextMenu(item, index)"
        >
          {{ item.lable }}
        </el-tag>
      </div>
      <div class="dropdown-menu" v-show="dropdownMenu" :style="{marginLeft: menuMarginLeft}">
        <div class="dropdown-menu-span" @click="refreshPage">
          <span>刷新</span>
        </div>
        <div v-if="isCloseShow" class="dropdown-menu-span" @click="closePage">
          <span>关闭</span>
        </div>
        <div class="dropdown-menu-span" @click="closeOtherPage">
          <span>关闭其它</span>
        </div>
        <div class="dropdown-menu-span" @click="closeAllPage">
          <span>关闭所有</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
  import { computed, ref, onMounted  } from 'vue'
  import { removeDuplicates } from '~/utils/common'
  import { useRouter, useRoute } from 'vue-router';
  import store from '~/store/index'

  onMounted(() => {
    document.addEventListener('click', handleClickOutside);
  })

  const route = useRoute()
  const router = useRouter()
  const tags = computed(() => {
    return removeDuplicates(store.state.tagList)
  })

  const dropdownMenu = ref(false)
  const menuMarginLeft = ref('40px')
  const myTags = ref()
  // 当前右键的值
  const contextmenuValue = ref()
  const contextmenuIndex = ref(0)
  // 是否展示关闭选项
  const isCloseShow = ref(true)

  // 点击标签事件
  function handleMenu(item) {
    router.push(item.path)
  }

  // 点击关闭标签事件
  function handleClose(item, index) {
    store.commit('CLOSE_TAGS', item)
    const length = tags.value.length
    if(item.name !== route.name) {
      return
    }
    if(index === length) {
      router.push(tags.value[index - 1].path)
    } else {
      router.push(tags.value[index].path)
    }
  }

  // 右键
  function showContextMenu(item, index) {
    if(item.name === 'control') {
      isCloseShow.value = false
    } else {
      isCloseShow.value = true
    }
    contextmenuValue.value = item
    contextmenuIndex.value = index
    let totalTagsWidth = 0
    let over = false
    myTags.value.forEach((data, num) => {
      if(over) {
        return
      }
      totalTagsWidth = totalTagsWidth + data.$el.offsetWidth
      if(index === num) {
        over = true
      }
    });
    menuMarginLeft.value = index * 8 + totalTagsWidth - 20 + 'px'
    dropdownMenu.value = true
  }
  // 取消右键显示的div
  function handleClickOutside() {
    dropdownMenu.value = false
  }
  // 刷新当前页面
  function refreshPage() {
    const path = contextmenuValue.value.path
    router.replace('/black?redirect=' + path)
  }
  // 关闭当前页面
  function closePage() {
    handleClose(contextmenuValue.value, contextmenuIndex.value)
  }
  // 关闭所有页面
  function closeAllPage() {
    tags.value.forEach(data => {
      if(data.name !== 'control') {
        store.commit('CLOSE_TAGS', data)
        router.push('/operation/control')
      }
    })
  }
  // 关闭其他页面
  function closeOtherPage() {
    const contextmenu = contextmenuValue.value
    tags.value.forEach(data => {
      if(data.name !== 'control' && data.name !== contextmenu.name) {
        store.commit('CLOSE_TAGS', data)
        router.push(contextmenu.path)
      }
    })
  }

</script>

<style>
  .tags {
    @apply flex gap-2 mb-2 cursor-pointer;
  }

  .dropdown-menu {
    background: white;
    z-index: 9999;
    margin-top: -25px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    position: fixed;
  }
  .dropdown-menu-span span {
    margin: 5px 5px 5px 5px;
    font-size: 0.9rem;
    color: #585858;
  }
  .dropdown-menu-span:hover {
    background: #dadadb;
  }
</style>
